import React, { useEffect, useState } from 'react'
import styles from "./css/addConsumer.less"
import { Select, Form, Input, Button, message, Radio } from 'antd';
import { useDispatch, useSelector, } from 'umi'
import { IAddUser, IMyAuthority, IIdentity, IAuthority,IAuthorityApi } from '@/utils/interface';
type LayoutType = Parameters<typeof Form>[0]['layout'];
const addConsumer: React.FC = () => {
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const [form3] = Form.useForm();
    const [form4] = Form.useForm();
    const [form5] = Form.useForm();
    const [form6] = Form.useForm();
    useEffect(() => {
        dispatch({
            type: 'people/getViewAuthority'
        })
        dispatch({
            type: 'people/getIdentity'
        })
        dispatch({
            type: 'people/getAuthority'
        })
    }, [])
    const dispatch = useDispatch()
    const { viewAuthority } = useSelector(module => (module as { people: { viewAuthority: IMyAuthority[] } }).people)
    const { identityList } = useSelector(module => (module as { people: { identityList: IIdentity[] } }).people)
    const { authorityList } = useSelector(module => (module as { people: { authorityList: IAuthority[] } }).people)
    const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
    const [radio, setRadio] = useState<string>('添加用户');
    const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
        setFormLayout(layout);
    };
    const tailLayout = {
        wrapperCol: { offset: 1, span: 22 },
    };
    const editorLayout = {
        wrapperCol: { offset: 1, span: 8 }
    }
    const { Option } = Select;
    function myResetFields(form: any) {
        form.resetFields()
    }
    const onResetOne = () => {
        myResetFields(form1)
    }
    function onResetTwo() {
        myResetFields(form2)
    }
    function onResetThree() {
        myResetFields(form3)
    }
    function onResetFour() {
        myResetFields(form4)
    }
    function onResetFive() {
        myResetFields(form5)
    }
    function onResetSix() {
        myResetFields(form6)
    }
    function onFinish1(value: IAddUser) {
        const obj: IAddUser = {
            user_name: '',
            user_pwd: '',
            identity_id: '',
        }
        obj.user_name = value.user_name;
        obj.user_pwd = value.user_pwd;
        obj.identity_id = value.identity_id;
        let result = dispatch({
            type: 'people/setAddUser',
            payload: obj,
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form1.resetFields();
        })
    }
    function onFinish2(value: { identity_text: string }) {
        let obj: { identity_text?: string } = {}
        obj.identity_text = value.identity_text
        let result = dispatch({
            type: 'people/setAddiIdentity',
            payload: obj,
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form1.resetFields();
        })
    }
    function onFinish3(value: IAuthorityApi) {
        const obj: IAuthorityApi = {
            api_authority_text: '',
            api_authority_url: '',
            api_authority_method: '',
        }
        obj.api_authority_text = value.api_authority_text;
        obj.api_authority_url = value.api_authority_url;
        obj.api_authority_method = value.api_authority_method;
        let result = dispatch({
            type: 'people/setAuthorityApi',
            payload: obj,
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form3.resetFields();
        })
    }
    const plainOptions = ['添加用户', '更新用户']
    function onChange1(e:React.ChangeEvent|unknown){
        setRadio((e as {target:{value:string}}).target.value)
        console.log((e as {target:{value:string}}).target.value);
      };
    return <div className={styles.wrap}>
        <h1>添加用户</h1>
        <div className={styles.box}>
            <div>
                <div >
                    <Form 
                    form={form1} 
                    onFinish={onFinish1} 
                    name="control-hooks" 
                    onValuesChange={onFormLayoutChange} 
                    >    
                        <Radio.Group options={plainOptions} onChange={onChange1} value={radio} optionType="button" className={styles.headers}/>

                        {
                           radio==='更新用户'&&<Form.Item  name='paw' {...editorLayout}>
                            <Select placeholder='请选择身份id' size='large' className={styles.select}>
                                {
                                    identityList.map(item => {
                                        return <Option key={item.identity_id} value={item.identity_text}>{item.identity_text}</Option>
                                    })
                                }
                                </Select>
                                </Form.Item> 
                        }
                        <Form.Item name='user_name' {...tailLayout} >
                            <Input placeholder='请输入用户名' />
                        </Form.Item>
                        <Form.Item name='user_pwd' {...tailLayout} >
                            <Input placeholder='请输入密码' />
                        </Form.Item >

                        <Form.Item name='identity_id' {...editorLayout} >
                            <Select placeholder='请选择身份信息' className={styles.select} size='large'>
                                {
                                    identityList.map(item => {
                                        return <Option key={item.identity_id} value={item.identity_text}>{item.identity_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item >
                            <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                            <Button htmlType="button" onClick={onResetOne} className={styles.reset}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form >
                </div>
                <div>
                    <Form form={form2} initialValues={{ layout: formLayout }} layout={formLayout} onFinish={onFinish2}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加身份</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='identity_text' {...tailLayout}>
                            <Input placeholder='请输入身份名称' />
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetTwo} className={styles.reset}>
                            重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form3} initialValues={{ layout: formLayout }} onFinish={onFinish3}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加api接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='api_authority_text' {...tailLayout}>
                            <Input placeholder='请输入api接口权限名称' />
                        </Form.Item>
                        <Form.Item name='api_authority_url' {...tailLayout}>
                            <Input placeholder='请输入api接口权限url' />
                        </Form.Item>
                        <Form.Item name='api_authority_method' {...tailLayout}>
                            <Input placeholder='请输入api接口权限方法' />
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetThree} className={styles.reset}>
                            重置
                        </Button>
                    </Form>
                </div>
            </div>
            <div>
                <div>
                    <Form form={form4} initialValues={{ layout: formLayout }}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加视图接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='id' {...editorLayout}>
                            <Select placeholder='请选择已有试图' size='large'>
                                {
                                    viewAuthority.map(item => {
                                        return <Option value={item.view_authority_id} key={item.view_authority_id}>{item.view_authority_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetFour} className={styles.reset}>
                            重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form5} initialValues={{ layout: formLayout }}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>给身份设置api接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='id' {...editorLayout}>
                            <Select placeholder='请选择身份id' size='large'>
                                {
                                    identityList.map(item => {
                                        return <Option key={item.identity_id} value={item.identity_text}>{item.identity_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item name='id' {...editorLayout}>
                            <Select placeholder='请输入api接口权限名称' size='large'>
                            {
                                     authorityList.map(item => {
                                        return <Option key={item.api_authority_id} value={item.api_authority_id}>{item.api_authority_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetFive} className={styles.reset}>
                            重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form6} initialValues={{ layout: formLayout }}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>给身份视图设置权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='id' {...editorLayout}>
                            <Select placeholder='请选择身份id' size='large'>
                                {
                                    identityList.map(item => {
                                        return <Option key={item.identity_id} value={item.identity_text}>{item.identity_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item name='id' {...editorLayout}>
                            <Select placeholder='请选择试图权限id' size='large'>
                                {
                                    viewAuthority.map(item => {
                                        return <Option value={item.view_authority_id} key={item.view_authority_id}>{item.view_authority_text}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetSix} className={styles.reset}>
                            重置
                    </Button>
                    </Form>
                </div>
            </div>
        </div>
    </div>
}
export default addConsumer